<!-- 模型中心 -->
<template>
	<div class="content commonality">
		<el-button
			class="addModel"
			@click="go('addModel')"
			icon="el-icon-plus"
			type="primary"
		>新建模型</el-button>

		<!-- 项目列表 -->
		<div class="itemsList">
			<span>共有{{ newData2.length }}个项目</span>
			<el-button
				class="addModel"
				@click="go('addProject')"
				icon="el-icon-plus"
				type="primary"
			>新建项目</el-button>
			<div
				class="item"
				v-for="i in newData2"
				:key="i.id"
				@click="bimPreview(i)"
			>
				<img
					width="40%"
					height="100%"
					:src="i.projectPhotos"
					alt=""
				/>
				<div class="content">
					<h3>{{i.projectName}}</h3>
					<p>{{i.projectArea}}</p>
				</div>
			</div>
		</div>

		<!-- 筛选列表 -->
		<div class="filterList">
			<ul>
				<li>所有分类 :</li>
				<li>搜索</li>
			</ul>
			<ul>
				<li>专业 :</li>
				<li>房建</li>
				<li>道路</li>
				<li>桥涵</li>
				<li>施工</li>
			</ul>
			<ul>
				<li>项目所在区域 :</li>
				<li>深圳</li>
				<li>北京</li>
				<li>上海</li>
				<li>武汉</li>
			</ul>
			<ul>
				<p></p>
				<li>收起</li>
			</ul>
		</div>
		<!-- <el-button @click="aabb(4)" size="medium" type="primary">接口</el-button> -->
		<!-- <el-button @click="cccc()" size="medium" type="primary">接口1</el-button> -->

		<!-- 模型列表 -->
		<div class="videoList">
			<div
				v-for="i in newData1"
				:key="i.id"
				@click="bimPreview(i)"
			>
				<img
					width="100%"
					height="100%"
					:src="i.thumbnailUrl"
					alt=""
				/>
			</div>
		</div>

		<!-- 模型预览 -->
		<el-dialog
			:title="bim.title"
			:visible.sync="bim.visible"
			class="dialog bim-dialog"
			top="10vh"
			width="70%"
		>
			<BimPreview
				:projectId="bim.id"
				:projectName="bim.name"
				@change="bimPreviewChange"
			></BimPreview>
		</el-dialog>
	</div>
</template>

<script>
	// import { param } from '@/utils/base/url'
	import Api from './api'

	export default {
		name: 'animationCenter',
		data() {
			return {
				newData: '',
				newData1: '',
				newData2: '',
				restaurants: [],
				state: '',
				timeout: null,
				bim: {
					title: '',
					id: '',
					name: '',
					visible: false
				}
			}
		},
		created() {
			this.cccc()
			this.dddd()
		},
		mounted() {},
		methods: {
			cccc() {
				Api.getBimModel().then(res => {
					this.newData1 = res.records
					console.log(this.newData1)
				})
			},
			dddd() {
				Api.getBimProjectList().then(res => {
					this.newData2 = res.records
					console.log(this.newData2)
				})
			},
			bimPreview(item) {
				console.log(item)
				this.bim.name = item.modelName
				this.bim.id = item.id
				this.bim.title = item.professionalType
				this.bim.visible = true
			},
			bimPreviewChange(item) {
				console.log(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loadMap {
		height: 80%;
	}
	.addModel {
		z-index: 999;
		position: absolute;
		top: 10%;
	}

	.filterList {
		// 筛选菜单
		ul {
			padding: 0;
			&:last-child {
				// margin: 0;
				position: relative;
				text-align: right;
				li {
					// position: absolute;
					bottom: 0;
					right: 0;
					border: 1px solid;
				}
			}
			// 分类选项
			li {
				font-size: 16px;
				display: inline;
				margin-left: 25px;
				color: #fff;
				// 分类名
				&:first-child {
					text-align: right;
					margin: 0;
					width: 120px;
					display: inline-block;
				}
			}
		}
	}
	::v-deep .el-input--mini {
		// 分类输入框
		.el-input__inner {
			width: 200px;
			background: none;
		}
	}
	// 项目列表
	.itemsList {
		background-color: whitesmoke;
		width: 25%;
		height: 100%;
		float: left;
		// 列表每一项
		.item {
			width: 100%;
			height: 100px;
			// margin-left: 50px;
			margin-bottom: 20px;
			background-color: #d8d8d8;
			display: flex;
			cursor: pointer;
		}
	}
	// 动画列表
	.videoList {
		margin-bottom: 25px;
		display: flex;
		// justify-content: space-around;
		align-content: space-between;
		flex-wrap: wrap;
		// 列表每一项
		div {
			width: 300px;
			height: 300px;
			margin-left: 50px;
			margin-bottom: 20px;
			background-color: #d8d8d8;
			cursor: pointer;
		}
	}

	::v-deep .bim-dialog {
		height: 100%;
		.el-dialog {
			height: 80vh;
			display: flex;
			flex-direction: column;
			.el-dialog__body {
				flex: 1;
			}
		}
	}
</style>
